<section id="mask">
  <div class="page-header">
    <h1>Mask</h1>
  </div>
  <div class="row">
    <div class="span6">
      <form name="demo" class="form-horizontal">
        <div class="control-group">

          <div class="controls">
            <p class="lead" style="margin-top:60px">uiMask Directive Demo</p>
          </div>

          <label class="control-label">Masked Input:</label>

          <div class="controls">
            <input name="masked" ui-mask="{{y}}" ng-model="x" placeholder="Write a mask or click a button"
                   class="input-large" style="vertical-align: top;">
          <span class="help-inline">

            <div ng-show="x.length">Model value: <code>{{ x }}</code></div>
            <div ng-hide="x.length">Model value: <code>undefined</code></div>
            <div ng-show="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>{{ demo.masked.$viewValue
              }}</code></div>
            <div ng-hide="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>undefined</code></div>
          </span>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">Mask Definition:</label>

          <div class="controls">
            <input ng-model="y" class="input-large" style="vertical-align: top;">
            <span class="help-inline"><code>A</code> Any letter.<br><code>9</code> Any number.<br><code>*</code> Any letter or number.</span>
          </div>
        </div>

        <div class="control-group">
          <label class="control-label">Masks:</label>

          <div class="controls">
            <p>
              <button class="btn" ng-click="y = undefined">Set to undefined (uninitialize)</button>
            </p>
          </div>
          <div class="controls">
            <p>
              <button class="btn" ng-click="y = '(999) 999-9999'">Set to (999) 999-9999</button>
            </p>
          </div>
          <div class="controls">
            <p>
              <button class="btn" ng-click="y = '(999) 999-9999 ext. 999'">Set to (999) 999-9999 ext. 999</button>
            </p>
          </div>
          <div class="controls">
            <p>
              <button class="btn" ng-click="y = '(**: AAA-999)'">Set to (**: AAA-999)</button>
            </p>
          </div>
        </div>
      </form>

    </div>
    <div class="span6">
      <h3>How?</h3>
      <pre class="prettyprint">
        &gt;input type=&quot;text&quot; ng-model=&quot;phonenumber&quot; ui-mask=&quot;(999) 999-9999&quot;/&lt;
      </pre>
      <p>Replace &quot;(999) 999-9999&quot; with your desired mask.</p>
    </div>
  </div>
</section>
